<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js" ></script>
</head>
<body>
<div id="app">
  <todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                :item="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
  </todo>
</div>
<script>
  //slot:插槽
  Vue.component("todo",{
    template: '<div>\
              <slot name="todo-title"></slot>\
              <ul>\
              <slot name="todo-items"></slot>\
              </ul>\
            </div>'
  });

  Vue.component("todo-title",{
    props:['title'],
    template:'<p>{{title}}</p>'
  });
  Vue.component("todo-items",{
    props:['item','index'],
    template:'<li>{{index}}---{{item}} <button @click="remove">删除</button></li>',
    methods: {
      remove:function (index){
        this.$emit('remove',index);
      }
    }
  });

  let app=new Vue({
    el:'#app',
    data:{
      title:"超级赛亚人",
      todoItems:['java','linux','mysql']
    },
    methods:{
        removeItems:function (index){
          console.log("删除了"+this.todoItems[index]);
          this.todoItems.splice(index,1);
        }
    }
  });

</script>

</body>
</html>